<!--  -->
<template>
  <div class="app">
    <div class="search_box">
      <div class="container">
        <div class="search_box">
          <div class="icon">
            <span></span>
          </div>
          <input type="text" placeholder="搜索关键词" />
        </div>
      </div>
    </div>

    <div class="banner">
      <div class="container">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="image in slides" :key="image.src">
            <img v-lazy="image.src" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="grid">
      <div class="container">
        <div v-for="item in grid.items" :key="item.name" @click="gotoDetail(item.href.split('?')[1].split('=')[1])">
          <img :src="item.src" alt="" />
          <span v-text="item.name"></span>
        </div>
      </div>
    </div>

    <div class="follow_author">
      <div class="container">
        <div class="logo">
          <img :src="followAuthor.logo" alt="" />
        </div>
        <div class="info">
          <p v-text="followAuthor.name"></p>
          <span v-text="followAuthor.desc"></span>
        </div>
        <div class="follow">
          <div class="follow_btn" @click="maskShow=!maskShow">关注</div>
          <div class="mask" v-show="maskShow" @click="maskShow=!maskShow">
            <div class="qrcode" @click.stop="">
              <p>关注公众号</p>
              <!-- <img :src="followAuthor.qrcode" alt=""> -->
              <img src="" alt="没图" >
              <span>长按识别保存或截图保存二维码</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="container">

        <div class="tit">
          <span>录播课程</span>
          <span @click="goto('/vod')">查看全部</span>
        </div>

        <div class="lesson_list">
          <div class="lesson_item" v-for="(item) in lessonList.items" :key="item.id" @click="gotoDetail(item.id)">

            <div class="img_box">
              <img :src="item.thumb" alt="" />
            </div>

            <div class="info">
              <p class="lesson_tit" v-text="item.title"></p>
              <div>
                <span class="star_num" v-text="item.user_count + '人已订阅'"></span>
                <span v-if="item.is_free == 1" class="price_free" v-text="'免费'"></span>
                <span v-else class="price" v-text="'￥' + item.charge"></span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <bg-img></bg-img>
  <tab-bar :prop="'home'"></tab-bar>

  </div>
</template>

<script>
import Vue from "vue";
// import axios from "axios";
import bgImg from "@/components/bgImg";
import tabBar from "@/components/tabBar";
import { Swipe, SwipeItem, Lazyload ,Popup} from "vant";

Vue.use(Popup);

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "indexView",
  components: {
    Swipe,
    SwipeItem,
    bgImg,
    tabBar,
  },
  data() {
    //这里存放数据
    return {
      maskShow:false,
      slides: [],
      grid: [],
      blank: [],
      followAuthor: [],
      blocks: [],
      lessonList: [],
      value: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    gotoDetail: function (id) {
      // console.log(item);
      this.$router.push({
        path: '/vod/detail',
        query: {
          id
        },
      });
    },
    goto(path){
      this.$router.push({
        path
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // console.log(this.$axios);
    // 1. 通过请求获取首页数据
    await this.$axios
      .get("http://1.14.239.98/api/v2/viewBlock/page/blocks", {
        params: {
          platform: "h5",
          page_name: "h5-page-index",
        },
      })
      .then((res) => {
        // console.log(...res);
        // console.log(res);
        this.blocks = res.data;
        // console.log(this.blocks);
        // console.log(JSON.parse(JSON.stringify(res.data.data)));
        this.blocks.forEach((item) => {
          if (item.sign === "slider") {
            this.slides = item.config_render;
          }
          if (item.sign === "grid-nav") {
            this.grid = item.config_render;
          }
          if (item.sign === "blank") {
            this.blank = item.config_render;
          }
          if (item.sign === "h5-gzh-v1") {
            this.followAuthor = item.config_render;
          }
          if (item.sign === "h5-vod-v1") {
            this.lessonList = item.config_render;
          }
        });
      });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
div.app{
  background-color: #f3f6f9;
}
div.search_box {
  height: 1rem;
  width: 100%;
  background-color: white;
  //   margin-top: 0.1rem;
  div.container {
    height: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    div.search_box {
      width: 6.9rem;
      height: 0.72rem;
      border-radius: 0.36rem;
      display: flex;
      justify-content: start;
      background-color: #f5f5f5;
      div.icon {
        width: 1rem;
        height: 0.72rem;
        position: relative;

        span {
          padding: 0.12rem;
          border: 0.02rem solid #999;
          border-radius: 50%;
          position: absolute;
          transform: rotate(-45deg);
          top: 0.2rem;
          left: 0.4rem;
        }
        span:after {
          content: "";
          display: block;
          position: absolute;
          width: 0.025rem;
          height: 0.16rem;
          background-color: #999;
          top: 0.25rem;
        }
      }

      input {
        width: 5.86rem;
        height: 0.72rem;
        border: none;
        background-color: transparent;
        font-size: 0.28rem;
      }
    }
  }
}

div.banner {
  width: 100%;
  height: 2.7rem;
  background-color: white;
  div.container {
    width: 6.9rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 6.9rem;
      height: 2.3rem;
      border-radius: 0.16rem;
      overflow: hidden;
      .van-swipe-item {
        float: left;
        width: 6.9rem;
        height: 2.3rem;
        img {
          width: 6.9rem;
          height: 2.3rem;
        }
      }
    }
  }
}

div.grid {
  height: 1.6rem;
  background-color: white;
  div.container {
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      display: flex;
      flex-direction: column;
      justify-content: start;
      img {
        width: 1rem;
        height: 1rem;
      }
      span {
        font-size: 0.24rem;
        color: #333;
      }
    }
  }
}

div.follow_author {
  height: 1.6rem;
  width: 100%;
  background-color: white;
  div.container {
    height: 100%;
    width: 6.9rem;
    display: flex;
    align-items: center;
    div.logo {
      width: 1rem;
      height: 1rem;
      margin-right: 0.2rem;
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }
    }

    div.info {
      width: 4.4rem;
      height: 1rem;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: space-around;

      p {
        // margin-top: .1rem;
        font-size: 0.32rem;
        color: #333;
      }

      span {
        // margin-top: .05rem;
        font-size: 0.16rem;
        color: #999;
      }
    }

    div.follow {
      width: 1.16rem;
      height: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      div.follow_btn {
        width: 1.16rem;
        height: 0.48rem;
        font-size: 0.28rem;
        text-align: center;
        line-height: 0.48rem;
        color: white;
        border-radius: 0.24rem;
        background-color: rgb(60, 167, 250);
      }
      div.mask{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        div.qrcode{
          background-color: white;
          width: 4rem;
          height: 4.72rem;
          position: absolute;
          top: 0;
          left:0 ;
          right:0 ;
          bottom: 0;
          margin: auto;
          border-radius: .16rem;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          img{
            width: 2.4rem;
            height: 2.4rem;
          }
          p{
            color: #333;
            font-size: 14px;
          }
          span{
            color: #999;
          }
        }
      }
    }
  }
}

div.list {
  background-color: #fff;
  div.container {
    width: 6.9rem;
    display: flex;
    flex-direction: column;
    div.tit {
      width: 6.9rem;
      height: 0.38rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
      span:nth-child(1) {
        font-size: 0.36rem;
        color: #333;
      }
      span:nth-child(2) {
        font-size: 0.24rem;
        color: #999;
      }
    }

    div.lesson_list {
      width: 6.9rem;
      display: flex;
      flex-direction: column;
      div.lesson_item {
        width: 6.9rem;
        height: 1.8rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: .3rem;
        div.img_box {
          width: 2.4rem;
          height: 1.8rem;
          
          img {
            width: 2.4rem;
          height: 1.8rem;
          border-radius: .08rem;
          }
        }

        div.info {
          display: flex;
          width: 4.3rem;
          height: 1.8rem;
          flex-direction: column;
          justify-content: space-between;
          p.lesson_tit {
            margin-top: .1rem;
            font-size:.30rem;
            // margin-bottom: .3rem;
            text-align: start;
            
          }

          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .1rem;
            span.star_num {
              color: #999;
              font-size: .24rem;
            }

            span.price {
              color: #ff5858;
              font-size: .36rem;
              font-weight: bolder;
            }
            span.price::first-letter{
              font-size: .28rem;
            }
            span.price_free{
              color: #52c41a;
              font-size: .28rem;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
}
</style>
